<template>
	<view class="contain">
	<view class="flex-col page">
	  <view class="flex-row justify-end section space-x-6-reverse">
	    <view class="section_2"></view>
	    <view class="section_3"></view>
	    <view class="section_3"></view>
	    <view class="section_3"></view>
	  </view>
	  <view class="flex-row equal-division">
	    <view class="flex-col group equal-division-item space-y-10">
	      <view class="flex-col justify-start items-center image-wrapper view">
	        <image
	          class="image_3"
	          src="https://qiniu.ccchongya.com/chongya/images/16947555525183456022.png"
	        />
	      </view>
	      <text class="font_1 text">零食罐头</text>
	    </view>
	    <view class="flex-col items-start group group_2 space-y-10">
	      <view class="flex-row justify-end items-center section_4">
	        <image
	          class="image_4"
	          src="https://qiniu.ccchongya.com/chongya/images/16947555527712394517.png"
	        />
	        <image
	          class="image_6"
	          src="https://qiniu.ccchongya.com/chongya/images/16947555527849360318.png"
	        />
	      </view>
	      <text class="font_1 text_2">宠物日用</text>
	    </view>
	    <view class="flex-col group equal-division-item space-y-10">
	      <view class="flex-col justify-start items-end relative image-wrapper view_2">
	        <image
	          class="image_7"
	          src="https://qiniu.ccchongya.com/chongya/images/16947555530744090925.png"
	        />
	        <image
	          class="image pos"
	          src="https://qiniu.ccchongya.com/chongya/images/16947555530780801367.png"
	        />
	      </view>
	      <text class="font_1 text">猫粮犬粮</text>
	    </view>
	    <view class="flex-col group equal-division-item space-y-10">
	      <view class="flex-col justify-start items-center relative image-wrapper view_3">
	        <image
	          class="shrink-0 image_5"
	          src="https://qiniu.ccchongya.com/chongya/images/16947555532938092731.png"
	        />
	        <image
	          class="shrink-0 image_2 pos_2"
	          src="https://qiniu.ccchongya.com/chongya/images/16947555576933377951.png"
	        />
	      </view>
	      <text class="font_1 text">清洁美容</text>
	    </view>
	  </view>
	  <view class="flex-col group_3 space-y-10">
	    <view class="flex-col justify-start relative group_4">
	      <view class="flex-col justify-start items-center relative section_5">
	        <image
	          class="shrink-0 image_9"
	          src="https://qiniu.ccchongya.com/chongya/images/16947555576300247021.png"
	        />
	        <view class="group_5 view_4 pos_4">
	          <text class="font_2 text_3">要想宠物</text>
	          <text class="font_2 text_4">安全快速</text>
	          <text class="font_2 text_5">到达目的地</text>
	        </view>
	        <text class="group_5 text_6 pos_5">请上胖丫，大平台，有保障</text>
	      </view>
	      <image
	        class="image_8 pos_3"
	        src="https://qiniu.ccchongya.com/chongya/images/16947555575150424616.png"
	      />
	    </view>
	    <view class="flex-col justify-start relative group_6">
	      <view class="flex-row equal-division_2">
	        <view class="flex-col items-center group_10 equal-division-item_2 space-y-4">
	          <image
	            class="image_17"
	            src="https://qiniu.ccchongya.com/chongya/images/b0524fd56b8df95e0dd1609bc4977578.png"
	          />
	          <text class="font_11 text_17">首页</text>
	        </view>
	        <view class="flex-col items-center group_10 equal-division-item_2 space-y-4">
	          <image
	            class="image_17"
	            src="https://qiniu.ccchongya.com/chongya/images/03ebec244e7f26d7bcaeb00da5c73825.png"
	          />
	          <text class="font_11">拖运</text>
	        </view>
	        <view class="flex-col items-center group_10 equal-division-item_2 space-y-4">
	          <image
	            class="image_17"
	            src="https://qiniu.ccchongya.com/chongya/images/3fca2aa62f3c93aa4fea8d5e28014e29.png"
	          />
	          <text class="font_11">宠圈</text>
	        </view>
	        <view class="flex-col items-center group_10 equal-division-item_2 space-y-4">
	          <image
	            class="image_17"
	            src="https://qiniu.ccchongya.com/chongya/images/16947555382962496709.png"
	          />
	          <text class="font_11">服务</text>
	        </view>
	        <view class="flex-col items-center group_10 equal-division-item_2 space-y-4">
	          <image
	            class="image_17"
	            src="https://qiniu.ccchongya.com/chongya/images/ca00ffcfeb61390fb30da9bd21da0813.png"
	          />
	          <text class="font_11">我的</text>
	        </view>
	      </view>
	      <view class="flex-col space-y-8 pos_6">
	        <view class="flex-col section_6" v-for="(item, index) in items" :key="index">
	          <view class="flex-row items-center section_7 space-x-4">
	            <text class="font_3">活动热销</text>
	            <text class="font_4 text_7">更多好商品推荐</text>
	          </view>
	          <view class="grid">
	            <view class="flex-col grid-item space-y-9">
	              <image
	                class="image_10"
	                src="https://qiniu.ccchongya.com/chongya/images/16947555503021200289.png"
	              />
	              <text class="font_5 text_8">长在火山泥里的夏威夷果，不用剥壳好好吃。</text>
	              <view class="flex-row justify-evenly items-baseline group_7">
	                <text class="font_8">价格：</text>
	                <text class="font_9">￥</text>
	                <view class="group_8">
	                  <text class="font_6 text_11">1</text>
	                  <text class="font_7 text_11">85.00</text>
	                </view>
	              </view>
	            </view>
	            <view class="flex-col grid-item_2 space-y-9">
	              <image
	                class="image_10"
	                src="https://qiniu.ccchongya.com/chongya/images/16947555503720525250.png"
	              />
	              <text class="font_5 text_9">薄如蝉翼的金华火腿，每一口都是时间的味道</text>
	              <view class="flex-row justify-evenly items-baseline group_7">
	                <text class="font_8">价格：</text>
	                <text class="font_9">￥</text>
	                <view class="group_8">
	                  <text class="font_6 text_11">1</text>
	                  <text class="font_7 text_11">85.00</text>
	                </view>
	              </view>
	            </view>
	            <view class="flex-col grid-item_3 space-y-8">
	              <image
	                class="image_10 image_11"
	                src="https://qiniu.ccchongya.com/chongya/images/16947555505348985508.png"
	              />
	              <text class="font_5 text_10">不用削皮去籽的小黄瓜，一口甜进心里</text>
	              <view class="flex-row items-baseline group_9">
	                <text class="font_8">价格：</text>
	                <text class="font_9">￥</text>
	                <view class="group_8">
	                  <text class="font_6 text_11">1</text>
	                  <text class="font_7 text_11">85.00</text>
	                </view>
	              </view>
	            </view>
	            <view class="flex-col grid-item_4 space-y-9">
	              <image
	                class="shrink-0 image_10 image_12"
	                src="https://qiniu.ccchongya.com/chongya/images/16947555579034456532.png"
	              />
	              <text class="font_5 text_12">可鲁口腔喷剂 复合溶菌酶宠物喷雾 口臭口腔...</text>
	              <view class="flex-row justify-evenly items-baseline group_7">
	                <text class="font_8">价格：</text>
	                <text class="font_9">￥</text>
	                <view class="group_8">
	                  <text class="font_6 text_11">1</text>
	                  <text class="font_7 text_11">85.00</text>
	                </view>
	              </view>
	            </view>
	            <view class="flex-col grid-item_5">
	              <image
	                class="shrink-0 self-center image_10 image_13"
	                src="https://qiniu.ccchongya.com/chongya/images/16947555504605268937.png"
	              />
	              <text class="self-center font_5 text_13">内涵青年最后的吐槽街区：知乎APP</text>
	              <view class="flex-row justify-evenly items-baseline group_7 view_5">
	                <text class="font_8">价格：</text>
	                <text class="font_9">￥</text>
	                <view class="group_8">
	                  <text class="font_6 text_11">1</text>
	                  <text class="font_7 text_11">85.00</text>
	                </view>
	              </view>
	              <image
	                class="shrink-0 self-center image_15"
	                src="https://qiniu.ccchongya.com/chongya/images/16947555576723122366.png"
	              />
	            </view>
	            <view class="flex-col grid-item_6 space-y-8">
	              <image
	                class="shrink-0 image_10 image_14"
	                src="https://qiniu.ccchongya.com/chongya/images/16947555507075674319.png"
	              />
	              <text class="font_5 text_14">揭秘：XX团队是如何操纵互联网舆论的。</text>
	              <view class="flex-row items-baseline group_9">
	                <text class="font_8">价格：</text>
	                <text class="font_9">￥</text>
	                <view class="group_8">
	                  <text class="font_6 text_11">1</text>
	                  <text class="font_7 text_11">85.00</text>
	                </view>
	              </view>
	            </view>
	          </view>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
	</view>
</template>
<style scoped>

/* //code.fun生成的全局 */
@import url('../../static/css/style.css');
.page {
  background-color: #f5f7f7;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  padding: 500rpx 36rpx 12rpx;
  background-image: url('https://qiniu.ccchongya.com/chongya/images/16947555575295748116.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.space-x-6-reverse > view:not(:last-child),
.space-x-6-reverse > text:not(:last-child),
.space-x-6-reverse > image:not(:last-child) {
  margin-right: 12rpx;
}
.section_2 {
  background-color: #ffffff;
  border-radius: 270rpx;
  width: 28rpx;
  height: 6rpx;
}
.section_3 {
  background-color: #ffffff75;
  border-radius: 270rpx;
  width: 28rpx;
  height: 6rpx;
}
.equal-division {
  margin: 28rpx 8rpx 0;
}
.group {
  flex: 1 1 183rpx;
}
.equal-division-item {
  padding: 8rpx 32rpx 8rpx 36rpx;
}
.image-wrapper {
  margin-left: 4rpx;
  margin-right: 12rpx;
}
.view {
  padding: 12rpx 0;
  background-image: url('https://qiniu.ccchongya.com/chongya/images/16947555525042430313.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.image_3 {
  width: 100rpx;
  height: 76rpx;
}
.font_1 {
  font-size: 28rpx;
  font-family: HarmonyOSSansSC;
  line-height: 24rpx;
  color: #6e6e6e;
}
.text {
  line-height: 26rpx;
}
.group_2 {
  padding: 8rpx 32rpx;
}
.section_4 {
  margin-left: 4rpx;
  padding-top: 22rpx;
  overflow: hidden;
  background-image: url('https://qiniu.ccchongya.com/chongya/images/16947555525780587226.png');
  background-position: 0% 0%;
  background-size: 100%, 100%;
  background-repeat: no-repeat;
  width: 100rpx;
}
.image_4 {
  margin-left: 20rpx;
  margin-right: -100rpx;
  width: 82rpx;
  height: 78rpx;
}
.image_6 {
  margin-right: 76rpx;
  width: 24rpx;
  height: 58rpx;
}
.text_2 {
  line-height: 26rpx;
}
.view_2 {
  padding-top: 40rpx;
  background-image: url('https://qiniu.ccchongya.com/chongya/images/16947555527871946731.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.image_7 {
  width: 60rpx;
  height: 58rpx;
}
.image {
  width: 100rpx;
  height: 100rpx;
}
.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.view_3 {
  padding-top: 20rpx;
  overflow: hidden;
  background-image: url('https://qiniu.ccchongya.com/chongya/images/16947555530814662439.png');
  background-position: 0% 0%;
  background-size: 100%, 100%;
  background-repeat: no-repeat;
}
.image_5 {
  width: 86rpx;
  height: 80rpx;
}
.image_2 {
  width: 36rpx;
  height: 46rpx;
}
.pos_2 {
  position: absolute;
  left: 0;
  top: 4rpx;
}
.group_3 {
  margin-top: 12rpx;
}
.space-y-10 > view:not(:first-child),
.space-y-10 > text:not(:first-child),
.space-y-10 > image:not(:first-child) {
  margin-top: 20rpx;
}
.group_4 {
  padding: 18rpx 0 32rpx;
}
.section_5 {
  margin: 0 20rpx;
  background-image: linear-gradient(90deg, #4578ff 0%, #8af7ff 101.7%);
  border-radius: 16rpx;
  overflow: hidden;
}
.image_9 {
  filter: blur(19rpx);
  width: 710rpx;
  height: 128rpx;
}
.group_5 {
  text-shadow: 8rpx -8rpx 28rpx #00000040;
}
.view_4 {
  line-height: 26rpx;
}
.pos_4 {
  position: absolute;
  left: 39rpx;
  top: 31rpx;
}
.font_2 {
  font-size: 28rpx;
  font-family: AlimamaShuHeiTi;
  line-height: 24rpx;
  color: #ffffff;
}
.text_3 {
  line-height: 26rpx;
}
.text_4 {
  color: #ffeb3b;
  line-height: 26rpx;
}
.font_5{
  font-size: 18rpx;
  font-family: HarmonyOSSansSC;
  line-height: 1.5;
  color: #081329;

}
.text_9 {
  /* line-height: 26rpx; */
}
.text_6 {
  color: #ffffff;
  font-size: 32rpx;
  font-family: AlimamaShuHeiTi;
  line-height: 30rpx;
}
.pos_5 {
  position: absolute;
  left: 39rpx;
  bottom: 23rpx;
}
.image_8 {
  width: 212rpx;
  height: 178rpx;
}
.pos_3 {
  position: absolute;
  right: 26rpx;
  bottom: 0;
}
.group_6 {
  padding-top: 2600rpx;
}
.equal-division_2 {
  padding: 24rpx 0;
  background-color: #ffffff;
  overflow: hidden;
}
.group_10 {
  flex: 1 1 150rpx;
}
.equal-division-item_2 {
  padding: 12rpx 0;
}
.space-y-4 > view:not(:first-child),
.space-y-4 > text:not(:first-child),
.space-y-4 > image:not(:first-child) {
  margin-top: 8rpx;
}
.image_17 {
  width: 48rpx;
  height: 48rpx;
}
.font_11 {
  font-size: 20rpx;
  font-family: HarmonyOSSansSC;
  line-height: 18rpx;
  color: #666e7a;
}
.text_17 {
  color: #ffbd52;
}
.section_6 {
  padding-bottom: 20rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  filter: drop-shadow(0px 0px 8rpx #ffbd5208);
  overflow: hidden;
  border: solid 1.2rpx #e8a2a26e;
}
.section_7 {
  padding: 28rpx 24rpx 40rpx;
  background-image: linear-gradient(180deg, #f2aab12b -36.1%, #ffffff75 92.3%);
}
.space-x-4 > view:not(:first-child),
.space-x-4 > text:not(:first-child),
.space-x-4 > image:not(:first-child) {
  margin-left: 8rpx;
}
.font_3 {
  font-size: 32rpx;
  font-family: HarmonyOSSansSC;
  line-height: 30rpx;
  color: #081329;
}
.font_4 {
  font-size: 24rpx;
  font-family: HarmonyOSSansSC;
  line-height: 24rpx;
}
.text_7 {
  color: #081329;
  line-height: 23rpx;
  opacity: 0.46;
}
.grid {
  height: 733rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 28rpx;
}
.grid-item {
  padding: 16rpx 0 40rpx 16rpx;
}
.image_10 {
  overflow: hidden;
  width: 220rpx;
  height: 214rpx;
}
.font_5{
  font-size: 18rpx;
  font-family: HarmonyOSSansSC;
  line-height: 1.5;
  color: #081329;

}
.text_8 {
  /* line-height: 26rpx; */
}
.group_7 {
  padding: 0 20rpx;
}
.font_8 {
  font-size: 16rpx;
  font-family: HarmonyOSSansSC;
  line-height: 15rpx;
  color: #666e7a;
}
.font_9 {
  font-size: 16rpx;
  font-family: HarmonyOSSansSC;
  line-height: 12rpx;
  color: #ff5733;
}
.group_8 {
  line-height: 24rpx;
  height: 24rpx;
}
.font_6 {
  font-size: 28rpx;
  font-family: HarmonyOSSansSC;
  line-height: 21rpx;
  color: #ff5733;
}
.font_7 {
  font-size: 32rpx;
  font-family: HarmonyOSSansSC;
  line-height: 24rpx;
  color: #ff5733;
}
.text_11 {
  word-break: break-all;
}
.grid-item_2 {
  padding: 16rpx 4rpx 40rpx 12rpx;
}
.text_9 {
  margin-left: 8rpx;
  line-height: 26rpx;
}
.grid-item_3 {
  padding: 16rpx 0 40rpx 12rpx;
}
.image_11 {
  margin-right: 8rpx;
}
.text_10 {
  margin-left: 8rpx;
  line-height: 26rpx;
}
.group_9 {
  padding: 0 16rpx;
}
.grid-item_4 {
  padding-left: 16rpx;
  padding-bottom: 68rpx;
}
.space-y-9 > view:not(:first-child),
.space-y-9 > text:not(:first-child),
.space-y-9 > image:not(:first-child) {
  margin-top: 18rpx;
}
.image_12 {
  margin-top: -16rpx;
}
.text_12 {
  margin-left: 8rpx;
  line-height: 26rpx;
}
.grid-item_5 {
  padding: 0 4rpx 12rpx 12rpx;
}
.image_13 {
  margin-top: -16rpx;
}
.text_13 {
  margin-top: 16rpx;
  line-height: 26rpx;
}
.view_5 {
  margin-top: 20rpx;
}
.image_15 {
  margin-top: 44rpx;
  width: 110rpx;
  height: 14rpx;
}
.grid-item_6 {
  padding: 0 8rpx 68rpx 12rpx;
}
.space-y-8 > view:not(:first-child),
.space-y-8 > text:not(:first-child),
.space-y-8 > image:not(:first-child) {
  margin-top: 16rpx;
}
.pos_6 {
  position: absolute;
  left: 19rpx;
  right: 19rpx;
  top: 0;
}
.image_14 {
  margin-top: -12rpx;
}
.text_14 {
  margin-left: 8rpx;
  line-height: 26rpx;
}
</style>
<script>
	const $ = require('@/utils/api.js');
	let self;
	export default {
		data() {
			return {
				    items: [null, null],
				top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
				isIphonex: uni.getStorageSync('isIphonex') ? uni.getStorageSync('isIphonex') : false,
				cateList: [],
				height: 0,
				active: 0,
			};
		},
		onLoad: function() {
			self = this;
			let height = getApp().globalData.height;
			height = height-44-this.top;
			this.height = height;
			this.init();
		},
		methods: {
			getCate() {
				$.ajax({
					url: 'common/goodsCate/getList',
					data: {},
					method: 'GET',
					success(res) {
						self.cateList = res.data;
					}
				})
			},
			init() {
				this.getCate();
			},
		},
		created() {
		},
		computed: {
			i18n() {
				return this.$t('search')
			},
		},
		mounted() {},
		destroyed() {},
		components: {},
		onPullDownRefresh() {
		},
		onReachBottom() {
		}
	}
</script>
